export const applyBounceAnimation = (element, running = true) => {
  if (running == false) {
    element.style.animation = ''
    return false
  }
  // 声明变量在外部作用域
  let translateX = '0px'
  let translateY = '0px'
  const translateZ = '0px'

  const position = element._tdt_pos
  if (position) {
    translateX = position.x
    translateY = position.y
    console.log('x:', translateX, 'y:', translateY)
  } else {
    console.log('The _tdt_pos property is not defined.')
  }

  const animationName = 'markerBounce'
  // 创建通用的 @keyframes 动画
  const keyframes = `
					@keyframes ${animationName} {
						0% {
							transform: translate3d(${translateX}px, ${translateY}px, ${translateZ});
						}
						100% {
							transform: translate3d(${translateX}px, ${parseFloat(translateY) - 50}px, ${translateZ});
						}
					}
				`
  // console.log('charu',keyframes);

  // 插入到样式表中，只插入一次
  const styleSheet = document.styleSheets[0]
  // console.log('styleSheet',styleSheet);
  const existingRule = Array.from(styleSheet.cssRules).some(rule => rule.name === 'bounce-animation')
  if (!existingRule) {
    console.log('插入css')
    styleSheet.insertRule(keyframes, styleSheet.cssRules.length)
    // console.log(styleSheet.cssRules); // 查看插入后的所有规则
  } else {
    // 修改对应的 @keyframes 动画（如果已经插入过通用的样式，可以重新定义）
    styleSheet.deleteRule(styleSheet.cssRules.length - 1) // 删除之前的规则
    styleSheet.insertRule(keyframes, styleSheet.cssRules.length) // 插入新的规则
  }

  // 确保样式插入后重新渲染
  requestAnimationFrame(() => {

  })
  // 给元素添加动画
  element.style.animation = `${animationName} 0.5s infinite ease-in-out alternate`
  // 当动画结束时，移除动画并继续到下一个元素
  setTimeout(() => {
    element.style.animation = ''
  }, 10000)
}
